<template>
  <div class="login-container clearfix">
		<div class="login-left">
			<div class="login-bg-text">
				<p><span>USER </span><span>MANAGEMENT </span><span>BACKGROUND</span></p>
				<p>用户管理后台</p>
			</div>
		</div>
		<div class="login-right">
			<el-form class="card-box login-form" autoComplete="on" :model="loginForm" :rules="loginRules" ref="loginForm" label-position="left" label-width="50px">
				<h3 class="title">用户登录</h3>

				<el-form-item prop="username" label="账号">
					<el-input name="username" type="text" spellcheck="false" v-model="loginForm.username" autoComplete="off" placeholder="请输入您的账号" :clearable="true"/>
				</el-form-item>

				<el-form-item prop="password" label="密码">
					<el-input name="password" :type="pwdType" @keyup.enter.native="handleLogin" v-model="loginForm.password" autoComplete="off"
						placeholder="请输入您的密码" :clearable="true"/>
					<span class="show-pwd" @click="showPwd"><!--<icon :name="eyeType" scale="2" />--></span>
				</el-form-item>

				<el-button type="primary" style="width:100%;margin-top:20px;" :loading="loading" @click.native.prevent="handleLogin">登录</el-button>
			</el-form>
		</div>
  </div>
</template>
<script>
import logoPng from '@/assets/common_images/login-logo.png'
import { loginHandle } from '@/api/login' // 登录相关
import { setToken } from '@/utils/auth' // 注册token相关

export default {
  name: 'login',
  data () {
    const validateUsername = (rule, value, callback) => {
      if (value.length < 1) {
        callback(new Error('请输入您的账号'))
      } else {
        callback()
      }
    }
    const validatePassword = (rule, value, callback) => {
        if (value.length < 1) {
					callback(new Error('请输入您的密码'))
				} else if (value.length < 6) {
					callback(new Error('密码不能小于6位'))
				} else {
					callback()
				}
    }
    return {
      loginForm: {
        username: '',
        password: ''
      },
      loginRules: {
        username: [{ trigger: 'blur', validator: validateUsername }],
        password: [{ trigger: 'blur', validator: validatePassword }]
      },
      pwdType: 'password',
      eyeType: 'eye',
      loading: false,
      showDialog: false,
      logoPng: logoPng
    }
  },
  methods: {
    showPwd () {
      if (this.pwdType === 'password') {
        this.eyeType = 'eye-open'
        this.pwdType = ''
      } else {
        this.eyeType = 'eye'
        this.pwdType = 'password'
      }
    },
    handleLogin () {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          this.loading = true
          loginHandle({username: this.loginForm.username, password: this.loginForm.password}).then(response => {
            setToken(response.data.token) // 设置登录用户的token
            this.loading = false
            this.$router.push({ path: '/' }) // 跳转到首页
          }).catch(error => {
						this.loading = false
            if (error && error.data) {
              this.$message.error(error.data.msg)
            } else {
              this.$message.error('登录失败，请稍后重试')
            }
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    afterQRScan () {
      // const hash = window.location.hash.slice(1)
      // const hashObj = getQueryObject(hash)
      // const originUrl = window.location.origin
      // history.replaceState({}, '', originUrl)
      // const codeMap = {
      //   wechat: 'code',
      //   tencent: 'code'
      // }
      // const codeName = hashObj[codeMap[this.auth_type]]
      // if (!codeName) {
      //   alert('第三方登录失败')
      // } else {
      //   this.$store.dispatch('LoginByThirdparty', codeName).then(() => {
      //     this.$router.push({ path: '/' })
      //   })
      // }
    }
  },
  created () {
    // window.addEventListener('hashchange', this.afterQRScan)
  },
  destroyed () {
    // window.removeEventListener('hashchange', this.afterQRScan)
  }
}
</script>

<style rel="stylesheet/scss" lang="scss">
  @import "src/styles/mixin.scss";
  $bg:#50b2e3;
  $dark_gray:#50b2e3;
  $light_gray:#eee;

  .login-container {
    @include relative;
    height: 100vh;
    min-height: 680px;
    /*background-color: $bg;
    background-image: url("../../assets/common_images/login-bg.png");*/
    background-size: 50%;
    background-repeat: no-repeat;
    background-position-x: center;
    background-position-y: bottom;
    input:-webkit-autofill {
      -webkit-box-shadow: 0 0 0px 1000px #293444 inset !important;
      -webkit-text-fill-color: #fff !important;
    }
    .svg-icon {
      color:#50b2e3;
    }
    input {
      background: transparent;
			border: 0;
      border-bottom: 1px solid #e1e9f3;
      -webkit-appearance: none;
      border-radius: 0px;
      padding: 12px 5px 12px 20px;
      color: #4d4d4d;
      height: 40px;
    }
    .el-input {
      display: inline-block;
      height: 40px;
      width: 100%;
			font-size:16px;
    }
    .tips {
      font-size: 14px;
      color: #fff;
      margin-bottom: 10px;
    }
    .svg-container {
      padding: 6px 5px 6px 15px;
      color: #50b2e3;
      vertical-align: middle;
      width: 30px;
      display: inline-block;
      &_login {
        font-size: 26px;
      }
    }
    .title {
      font-size: 20px;
      font-weight: 400;
      color: #4d4d4d;
      margin: 0px auto 50px auto;
      text-align: center;
      font-weight: bold;
    }
    .logo {
      text-align: center;
      margin-bottom: 20px;
    }
    .login-form {
      position: absolute;
      left: 0;
      right: 0;
      width: 350px;
      padding: 35px 35px 15px 35px;
			margin:0 auto;
			top:calc(50vh - 200px);
    }
    .el-form-item {
      border: 1px solid rgba(255, 255, 255, 0.1);
      background: rgba(255, 255, 255, 1);
      border-radius: 5px;
      color: #454545;
    }
    .el-form-item__error {
      color: #f84242;
      width: 100%;
      padding: 5px 0 0 0;
    }
		.el-form-item.is-success .el-input__inner{
			border-color:#e1e9f3;
		}
    .show-pwd {
      position: absolute;
      right: 10px;
      top: 7px;
      font-size: 16px;
      color: $dark_gray;
      cursor: pointer;
      user-select:none;
    }
    .thirdparty-button{
      position: absolute;
      right: 35px;
      bottom: 28px;
    }
    .el-button--primary {
      background-color: #409EFF;
      height: 48px;
      font-size: 18px;
    }
		.el-form-item__label {
			font-size:16px;
			color:#4d4d4d;
		}
    .el-button.is-loading:before {
      background-color: rgba(255,255,255,.15);
    }
    .footer {
      position: absolute;
      bottom: 50px;
      left: 0;
      right: 0;
      width: 400px;
      padding: 35px 35px 15px 35px;
      margin: 80px auto 0px;
      text-align: center;
    }
    .footer {
      color: #fff;
    }
    .footer a {
      font-size: 16px;
      padding: 0 20px;
    }
		.login-left{
			float:left;
			width:calc(100% - 520px);
			height:100%;
			background: url("../../assets/common_images/login-bg.png") no-repeat;
			background-size: cover;
			position:relative;
		}
		.login-left .login-bg-text{
			position:absolute;
			right:60px;
			bottom:100px;
			color:#fff;
		}
		.login-left .login-bg-text p:first-of-type{
			font-size:40px;
			margin:0;
		}
		.login-left .login-bg-text p:last-of-type{
			font-size:24px;
			margin:10px 0 0 0;
			float:right;
		}
		.login-right{
			width:520px;
			float:left;
			position:relative;
		}
	@media screen and (max-width: 1360px) {
		.login-left .login-bg-text p:first-of-type{
			font-size:34px;
		}
	}
  }
</style>
